import React, {useEffect, useRef, useState} from 'react';
import {View, StyleSheet, Text} from 'react-native';

const ViewDemo7_2 = () => {
  const viewRef = useRef(null);

  const [height, setheight] = useState(100);

  useEffect(() => {
    // console.log(
    //   '如果你将空数组 [] 作为 useEffect 的依赖数组，那么 useEffect 中的函数只会在组件首次渲染后执行一次，之后的任何重新渲染都不会再次执行。这是因为空数组没有任何可以监视的值，所以 useEffect 不会在任何值改变时重新执行。这种模式常常被用来模拟 componentDidMount 生命周期方法的行为，在函数式组件首次渲染后执行一些只需要执行一次的操作。',
    // );
    setTimeout(() => {
      // console.log('zouzouzouzou');
      setheight(200);
    }, 2010);
    return () => {
      console.log('执行cleanup');
    };
  }, []);

  return (
    <View style={styles.root}>
      <Text
        style={{
          color: 'orange',
          fontSize: 20,
          textAlign: 'center',
          position: 'absolute',
          zIndex: 1,
        }}>
        7_2ViewDemo
      </Text>
      <View
        ref={viewRef}
        style={[styles.subView, {height}]}
        onLayout={event => {
          console.log('🚀 ~ onLayout: ', event.nativeEvent);
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flexDirection: 'column',
    width: '100%',
    height: 220,
    backgroundColor: '#C0C0C0',
    alignItems: 'center',
    // position: 'relative',
  },
  subView: {
    position: 'absolute',
    top: 20,
    // left: 10, // 如果子布局没有设置位置的话就会沿用父布局的样式
    width: 200,
    height: 200,
    backgroundColor: 'red',
  },
});
export default ViewDemo7_2;
